<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <th:block th:include="include :: header('训练任务列表')"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>目标检测系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f4f4f4;
        }
        .header {
            background-color: #444;
            color: #fff;
            width: 100%;
            padding: 10px;
            text-align: center;
        }
        .content {
            margin: 20px;
            text-align: center;
        }
        .buttons {
            margin-top: 20px;
        }
        button {
            background-color: #4682B4;
            color: white;
            border: none;
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #315f7b;
        }
        #mediaDisplay {
            margin: 20px 0;
            border: 2px solid #ccc;
        }
    </style>
</head>
<body>

<div class="header">
    Target detection system
</div>

<div class="content">
    <h2>视频检测功能</h2>
    <div id="mediaDisplay">
        <!-- 图片或视频将动态插入到这里 -->
    </div>
    <p>当前检测结果：<br>person: 17</p>

    <div class="buttons">
        <button onclick="startCamera()">摄像头实时监测</button>
        <button onclick="detectImage()">图片文件检测</button>
        <button onclick="detectVideo()">视频文件检测</button>
        <button onclick="stopDetection()">停止检测</button>
    </div>
</div>

<script>
    function startCamera() {
        // 这里可以插入代码以显示摄像头流
        const mediaDiv = document.getElementById('mediaDisplay');
        mediaDiv.innerHTML = '<video autoplay controls><source src="your-camera-url" type="video/mp4">Your browser does not support the video tag.</video>';
    }

    function detectImage() {
        const mediaDiv = document.getElementById('mediaDisplay');
        mediaDiv.innerHTML = '<img src="your-image-url" alt="Detection Results">';
    }

    function detectVideo() {
        const mediaDiv = document.getElementById('mediaDisplay');
        mediaDiv.innerHTML = '<video controls><source src="your-video-url.mp4" type="video/mp4">Your browser does not support the video tag.</video>';
    }

    function stopDetection() {
        const mediaDiv = document.getElementById('mediaDisplay');
        mediaDiv.innerHTML = ''; // 清空显示
    }
</script>

</body>
</html>
